<template>
	<view class="page">
		<!-- 地址列表 -->
		<view class="address-list">
			<view class="list" v-for="(item,index) in usercityList" :key="index">
				<view class="name-phone">
					<view class="name">
						<text class="one-omit">{{item.username}}</text>
					</view>
					<view class="phone">
						<text>{{item.phone}}</text>
						<text class="tag" v-if="item.is_chkec==1">默认</text>
					</view>
				</view>
				<view class="address-edit">
					<view class="address">
						<text>{{item.detailArea}}</text>
					</view>
					<view class="edit" @click.stop="onAddressEdit(item.id)">
						<text class="iconfont icon-edit1"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 添加地址 -->
		<view class="add-address">
			<view class="btn" @click="onAddressEdit(2)">
				<text>新建收货地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityData: require('../../static/city.json'), // 加载城市数据	
				value: [2, 5, 23],
				provinceList: [], // 省列表
				cityList: [], // 市列表
				areaList: [], // 区列表
				usercityList: [{
						id: '1',
						username: '哇哈哈',
						is_chkec: '1',
						phone: '15180539372',
						addressValue: [2, 5, 23],
						detailArea: '三里团'
					},
					{
						id: '1',
						username: '哇哈哈',
						is_chkec: '0',
						phone: '15180539372',
						addressValue: [2, 5, 23],
						detailArea: '三里团'
					},
					{
						id: '1',
						username: '哇哈哈',
						is_chkec: '0',
						phone: '15180539372',
						addressValue: [2, 5, 23],
						detailArea: '三里团'
					},
					{
						id: '1',
						username: '哇哈哈',
						is_chkec: '0',
						phone: '15180539372',
						addressValue: [2, 5, 23],
						detailArea: '三里团'
					},
					{
						id: '1',
						username: '哇哈哈',
						is_chkec: '0',
						phone: '15180539372',
						addressValue: [2, 5, 23],
						detailArea: '三里团'
					}
				]
			};
		},
		mounted() {
			this.loadProvince(this.cityData);
			if(this.cityData!=null)
			{
				this.usercityList.forEach(item=>{
					let test= ''
					
				
					
					test=this.provinceList[item.addressValue[0]]+this.cityList[item.addressValue[1]]+
					this.areaList[item.addressValue[2]]+item.detailArea
					
					item.detailArea = test
				
				})
					
				
			}
		},
		methods: {

			/**
			 * 编辑地址点击
			 */
			onAddressEdit(type) {
				uni.navigateTo({
					url: '/pages/AddressEdit/AddressEdit?type=' + type,
				})
			},
			// 加载数据
			loadProvince(data) {
				let newList = [];
				data.forEach(item => {
					newList.push(item.name);
				});
				this.provinceList = newList;
				this.loadCity(this.cityData[this.value[0]].city);
			},
			loadCity(data) {
				let newList = [];
				data.forEach(item => {
					newList.push(item.name);
				});
				this.cityList = newList;

				if ((data.length - 1) >= this.value[1]) { // 解决特殊情况报错的问题
					this.loadArea(this.cityData[this.value[0]].city[this.value[1]].area);
				} else {
					this.loadArea(this.cityData[this.value[0]].city[0].area);
				}

			},
			loadArea(data) {
				let newList = [];
				data.forEach(item => {
					newList.push(item);
				});
				this.areaList = newList;
			},

		},
		
	}
</script>

<style scoped lang="scss">
	@import 'AddressList.scss';
</style>
